import React from 'react'
import './CdnImage.scss'
import { Image, ImageProps } from 'antd';
import { ImageUtils } from '../../utils/image';


interface IProps {
    className?: string;
    style?: React.CSSProperties;
    src?: string;
    errorImageSrc?: string;
    cdn?: boolean;
    preview?: ImageProps;
}
export default function CdnImage(props: IProps) {
    const { className = '', style = {}, src = '', errorImageSrc, cdn=true, preview=false } = props;

    // const { imgCdn } = config.getHostConfig('default');
    const imgCdn = ''

    const [imageSrc, setImageSrc] = React.useState( cdn ? imgCdn + src : src );
    
    const onError = () => {
        if(errorImageSrc){
            setImageSrc(errorImageSrc)
        } else {
            setImageSrc(ImageUtils.errorImage)
        }
    }
    React.useEffect(() => {
        const imgSrc= cdn ? imgCdn + src : src;
        setImageSrc(imgSrc);
    }, [src])

    return (
        <>
            <Image 
                src={imageSrc} 
                onError={onError} 
                className={`image-cdn ${className}`} 
                preview={preview}
                style={style}/>
        </>
    )
}
